<template>
	<view class="u-m-t-32">
		<image src="https://tb.wuyouzhuan888.com/applet-icon/bg.png" class="bg-set" mode=""></image>
		<cate :list="list" />
		<u-loadmore v-if="!isEmpty" :status="status" color="#fff" icon-color="#fff" font-size="30" margin-top="10"
			margin-bottom="10" />
		<u-empty v-if="isEmpty" color="#A897D9" text="暂无数据"
			src="https://tb.wuyouzhuan888.com/appleticon/noDate.png"></u-empty>
	</view>
</template>

<script>
	import cate from '@/components/cate/index'
	export default {
		components: {
			cate
		},
		data() {
			return {
				// 图集列表
				list: [],
				current: 0,
				page: 1,
				total: 0,
				size: 10,
				// 数据为空
				isEmpty: false,
				status: "loadmore",
			}
		},
		onLoad() {
			uni.showLoading({
				title: "加载中...",
			})
			this.getDownloadAtlasList()

		},
		// 触底加载
		onReachBottom() {
			let allTotal = this.page * this.size;

			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				//加载中状态
				this.status = "loading";
				this.page++;
				this.getDownloadAtlasList();
			} else {
				//加载完状态
				this.status = "noMore";
			}
		},
		mounted() {
			uni.hideLoading()
		},
		methods: {
			getDownloadAtlasList() {
				this.$u.api.mine.getDownloadAtlasList({
					page: this.page,
					size: this.size
				}).then(res => {
					if (res.code != 200) {
						this.$u.toast(res.msg);
					}
					// 推荐列表总数
					this.total = res.data.total;

					// 页数大于1则追加
					if (this.page > 1) {
						this.list.push(...res.data.list);
					} else {
						this.list = res.data.list
					}

					if (this.size > res.data.list.length) {
						//加载完状态
						this.status = "noMore";
					}

					if (this.list.length == 0) {
						this.isEmpty = true;
					}
				})
			}
		},

	}
</script>

<style scoped>
	.title {
		font-size: 36rpx;
		font-family: PingFang SC-Light, PingFang SC;
		font-weight: 300;
		color: #FFFFFF;
		line-height: 42rpx;
	}
</style>